<template>
  <div style="background-color: rgb(245, 245, 245);">
    <headers></headers>
    <div class="title">
      <div class="auto">首页  >  认证考试  >  个人账户信息  >  教育经历</div>
    </div>
    <div class="padding250">
      <div class="auto">
        <!--为空时-->
        <div class="null" v-if="eduList.length == 0">
          <img src="../../../assets/null.jpg" alt="">
          <p class="text">暂时没有教育经历哦~</p>
          <router-link to="/addEducation"><Button  icon="ios-add-circle-outline">添加教育经历</Button></router-link>
          <a href="javascript:;" v-on:click="goBack">
            <Button style="margin-left: 10px;width: 80px;background-color: #2d8cf0;border-color: #2d8cf0;">返回</Button>
          </a>
        </div>
        <!--不为空时-->
        <div class="jiaoyu" v-if="eduList.length > 0">
          <div class="titles">
            教育经历
            <a href="javascript:;" v-on:click="goBack">
              <Button style="margin-left: 10px;width: 80px;background-color: #2d8cf0;border-color: #2d8cf0;" class="pull-right">返回</Button>
            </a>
            <router-link to="/addEducation"><Button icon="ios-add-circle-outline" class="pull-right">添加教育经历</Button></router-link>
          </div>
          <div class="list" v-for="item in eduList">
            <div class="name">{{item.schoolName}}
              <!--<router-link :to="{name:'addEducation',query:{userEduationId:item.id}}">
                <Button class="pull-right">编辑</Button>
              </router-link>-->
              <Button class="pull-right" v-on:click="delEdu(item)">删除</Button>
            </div>
            <ul>
              <li>
                学历：{{item.qualifiCations}} <span class="zhuanye">专业：{{item.major}}</span>
              </li>
              <li><span>就读时间：{{item.learnStartTime}}  至 {{item.learnEndTime}}</span> 职称：{{item.jobDescription}}</li>
              <li><span>证书编号：{{item.diplomasNum}}</span> 级别：{{item.gradeLeavel}}</li>
              <li>
                <img v-if="item.diplomasImage != ''" :src="item.diplomasImage" alt="" style="width: 275px;height: 200px;">
                <img v-if="item.jobImage != ''" :src="item.jobImage" alt="" style="width: 275px;height: 200px;">
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Modal
      v-model="modal1"
      title="删除教育经历提示"
      @on-ok="ok"
      @on-cancel="cancel">
      <p>您确定要删除该教育经历吗？</p>
    </Modal>
    <footers></footers>
  </div>
</template>


<script type="text/ecmascript-6">
  import {getUserEducation, delEducation} from "../../../http";
  import headers from '../../template/header'
  import footers from '../../template/footer'
    export default {
        name: 'education',
        props: {},
        data() {
            return {
              modal1: false,
              delEdId: '',
              showOrder: 'kaoshi',
              eduList: []
            };
        },
        methods: {
          ok(){
            let data = {
              eduationId: this.delEdId
            }
            delEducation(data).then(res => {
              this.$Notice.success({
                title: '教育经历提醒',
                desc: '删除教育经历成功',
                duration: 3,
              });
              this.getUserEducation()
            })
          },
          cancel(){
          },
          goBack(){
            this.$router.push({
              name: 'kaoshiAccount'
            })
          },
          getUserEducation(){
            getUserEducation().then(res => {
              this.eduList = res.data.eduationList
            })
          },
          delEdu(v){
            this.delEdId = v.id
            this.modal1 = true
          }
        },
        created() {
          this.getUserEducation()
        },
        components: {
          headers,
          footers
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .null{
    text-align: center;
    padding: 200px 0;
    .text{
      font-size: 14px;
      color: #999;
      margin: 10px 0 60px;
    }
  }
  button{
    background-color: #B2936B;
    color: #fff;
    display: inline-block;
    width: 200px;
    height: 50px;
    text-align: center;
    border-radius: 5px;
    font-size: 18px;
  }
  .title{
    font-size: 14px;
    color: #fff;
    height: 60px;
    line-height: 60px;
    background-color: #2F261E;
    text-align: left;
  }
  .padding250 .auto{
    background-color: #fff;
    margin-top: 30px;
    .jiaoyu{
      padding: 40px;
      .titles{
        font-size: 20px;
        color: #000;
        margin-bottom: 50px;
        text-align: left;
      }
      .list{
        border-radius: 5px;
        padding: 30px;
        box-shadow: 0px 0px 10px #ececec;
        text-align: left;
        margin-bottom: 40px;
        .name{
          font-size: 20px;
          color: #000;
          margin-bottom: 20px;
          button{
            border:1px solid #B2936B;
            color: #B2936B;
            font-size: 16px;
            background-color: #fff;
            width: 80px;
            height: 36px;
            line-height: 20px;
          }
        }
        li{
          font-size: 14px;
          color: #333;
          margin-bottom: 10px;
          .zhuanye{
            margin-left: 20px;
          }
          span{
            display: inline-block;
            width: 350px;
          }
          img:first-child{
            margin-right: 78px;
          }
        }
      }
    }

  }
</style>
